<template>
  <div>
    <Header></Header> <!-- 子页面公共头部 -->
    <div class="ej_box">
      <div class="ej_center">
        <Crumbs :lmtitle="lmtitle"></Crumbs> <!-- 面包屑导航 -->
        <div class="clear"></div>
        <div class="row">

          <div class="col-md-12">

            <div class="ej_content_box">
              <div class="ej_content">
                <div class="ej_content_nav">
                  <div class="ej_content_nav_pc">
                    <h2 class="ej_content_nav_pc_h2dt">
                      <!-- class="activexz" -->
                      <li v-for="item in dhData" @click="link(item.id)"
                        :class="formdata.columnId == item.id ? 'activexz' : ''">{{ item.name }}</li>
                    </h2>

                    <div class="clearfix"></div>
                  </div>
                </div>

                <div class="ej_content_editor"  v-if="!quanxian">
                  <div class="zcfg_con2">
                    <div class="ej_content_title">
                      <h1 class="ej_content_title_h2 fangsong">{{ formdata.title }}</h1>
                    </div>
                    <div class="ej_content_editor">
                      <div class="txl_top" v-if="ishow">
                        <div class="txl_topcon">
                          <div class="txl_top_fl fangsong">
                            <!--发布者：{{ formdata.postedBy }}  -->
                            作者：{{ formdata.author }}
                            &nbsp;
                            审核人：{{ formdata.postedBy }}
                           <!-- <template v-if="formdata.signBy">
                              签发人：{{ formdata.signBy }}
                            </template>-->
                          </div>
                          <div class="txl_top_fr fangsong">
                            发布时间：
                            {{ formdata.createTime | formatDate }}
                            &nbsp;
                            阅读：<span>{{ formdata.thumbs>1000?'1000+' : formdata.thumbs}}</span>次
                          </div>
                        </div>
                      </div>

                      <div class="txl_nr">
                        <div class="ej_content_editor2" id="wrapper">
                          <div id="controls">
                            <span class="medium selected"
                              @click="setttingfont(fontsize)">{{ fontsize == 14 ? '字体+' : '字体-' }}</span>
                          </div>
                          <div class="fangsong-gb" v-html="formdata.content" :style="{ fontSize: fontsize + 'px' }"></div>
                          <ul v-if='formdata.fileUrl' class="txllist">
                            <li v-for="item in formdata.fileUrllist" @click="down(item.url)">
                              <i class="iconfont icon-PDFtubiao" style="color: red;" v-if="item.suffixName.endsWith('pdf')"></i>
                              <i class="iconfont icon-WORD1" style="color: blue;" v-if="item.suffixName.endsWith('doc')"></i>
                              <i class="iconfont icon-WORD1" style="color: green;" v-if="item.suffixName.endsWith('xls')"></i>
                              <i class="iconfont icon-WORD1" style="color: blue;" v-if="item.suffixName.endsWith('other')"></i>
                              {{ item.name }}
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>

                  </div>


                </div>
                <div class="zwqx" v-else>
            <!--<p>暂无访问权限，请联系管理员！</p>-->
            <p>{{message}}</p>
          </div>
              </div>
            </div>
          </div>


          <div class="clearfix"></div>
        </div>


      </div>
    </div>
    <Foot></Foot> <!-- 网站公共底部 -->
  </div>
</template>
<script>
import Foot from "@/components/foot.vue";
import Crumbs from "@/components/crumbs.vue";
import SeniorSearch from "@/components/seniorsearch.vue";
import Cookies from 'js-cookie'
import { contentApiqueryOne } from "@/api/webviews";
import Header from "@/components/header.vue";
export default {
  name: "articlecontent",
  components: {
    Header,
    Crumbs,
    SeniorSearch,
    Foot
  },
  filters:{
    formatDate(data){
    if(data){
      return  data.split(' ')[0]
    }
    },
  },
  data() {
    return {
      dhData: [],
      ParentId: '',
      formdata: {},
      fontsize: '14',
      lmtitle: '',
      ishow: true,
      quanxian:false,
      message: '暂无访问权限，请联系管理员！'
    };
  },
  created() {
    this.dhData = JSON.parse(Cookies.get('navdata'))[this.$route.query.navId]
    if (this.$route.query.id == 'C0A8B1507E0441F28FA9448DF52AC6DC' || this.$route.query.id == '2293BE31C5B4449FA5487BA2228BA6ED') {
      this.ishow = false
    }
  },
  watch: {
    //监听路由地址的改变
    $route: {
      immediate: true,
      handler() {
        if (this.$route.query.id) {//需要监听的参数
          this.getdata(this.$route.query.id)

          // if(this.$route.query.navId)   this.lmtitle = JSON.parse(Cookies.get('navdata'))[this.$route.query.navId][0].name
          this.dhData = JSON.parse(Cookies.get('navdata'))[this.$route.query.navId]
        }
      }
    }
  },
  methods: {
    down(item) {
      window.open(this.requestUrl+item,"_blank")
    },
    setttingfont(fontsize) {
      if (fontsize == 14) {
        this.fontsize = 16
      } else {
        this.fontsize = 14
      }

    },
    getdata(id) {
      contentApiqueryOne({ id: id })
        .then((res) => {
          console.log("内容",res);
          if (res.code == 0) {
            this.formdata = res.data;
            this.formdata.fileUrllist = []
            if(! this.lmtitle){ // 面包屑内容
              this.lmtitle = this.formdata.columnName
            }
            if(res.data.fileUrl){
              let arrya = []
              let namelist=[]
              arrya = this.formdata.fileUrl = res.data.fileUrl.split(",")
              namelist= res.data.fileName.split(",")
              arrya.map((item,index) => {
                let name = namelist[index];
                // 处理图标
                let suffixName= "other";
                if(name.toLowerCase().endsWith('.pdf')){
                  suffixName = "pdf";
                }else if(name.toLowerCase().endsWith('.doc') || name.toLowerCase().endsWith('.docx')){
                  suffixName = "doc";
                }else if(name.toLowerCase().endsWith('.xls') || name.toLowerCase().endsWith('.xlsx')){
                  suffixName = "xls";
                }
                this.formdata.fileUrllist.push(
                  {
                    name: name,
                    url: '/show' + item,
                    suffixName: suffixName
                  }
                )
              })
            }

          }else{
            this.quanxian = true
            this.message = res.message; // 后台返回错误提示
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    link(id) {
      /*this.$router.push({
        name: 'articlelistpage',
        query: { navId: this.$route.query.navId, id: id }
      })*/
      let routeData = this.$router.resolve({
        name: 'articlelistpage',
        query: { navId: this.$route.query.navId, id: id }
      })
      window.open(routeData.href, '_blank')
    },
    search(val) {
      /*this.$router.push({
        name: 'searchresult',
        query: { formdata: JSON.stringify(val) }
      })*/
      let routeData = this.$router.resolve({
        name: 'searchresult',
        query: { formdata: JSON.stringify(val) }
      })
      window.open(routeData.href, '_blank')
    },
  },
};
</script>
<style scoped>
@import "../assets/css/font/iconfont.css";
@import "../assets/css/icons/iconfont.css";
@import "../assets/css/index.css";
@import "../assets/css/style.css";
.fangsong{
  font-family: '宋体';
}
.fangsong-gb{
  padding-left: 60px;
  padding-right: 60px;
}

/*.fangsong-gb p{
  font-family: '仿宋_GB2312'!important;
}
.fangsong-gb div{
  font-family: '仿宋_GB2312'!important;
}*/
.fangsong-gb >>> p{
  font-family: '仿宋';
  font-size: 18px;
  line-height: 1.8em;
}
.fangsong-gb >>> font{
  font-family: '仿宋';
  font-size: 20px; /*默认小三字体 */
  line-height: 1.8em;
  /*letter-spacing: 0.1rem;*/
}
/*.fangsong-gb >>>img{
  display: block;
  margin: auto;
}*/
</style>
